<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单个转换功能测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
        }
        
        .test-section h3 {
            margin-top: 0;
            color: #666;
        }
        
        textarea {
            width: 100%;
            min-height: 100px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: monospace;
            font-size: 14px;
            resize: vertical;
        }
        
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px 5px 10px 0;
        }
        
        button:hover {
            background-color: #0056b3;
        }
        
        button:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
        }
        
        .result {
            margin-top: 15px;
            padding: 15px;
            border-radius: 4px;
            min-height: 100px;
            font-family: monospace;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        
        .result.success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        
        .result.error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        
        .result.info {
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }
        
        .loading {
            color: #6c757d;
            font-style: italic;
        }
        
        .api-url {
            font-family: monospace;
            background-color: #f8f9fa;
            padding: 5px 10px;
            border-radius: 4px;
            color: #495057;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Excel公式转换器 - 单个转换功能测试</h1>
        
        <div class="test-section">
            <h3>测试案例：IFS+OR复杂公式转换</h3>
            <p><strong>API接口：</strong> <span class="api-url">POST /api/formula-convert/single</span></p>
            
            <div style="margin-bottom: 15px;">
                <label for="testFormula"><strong>测试公式：</strong></label>
                <textarea id="testFormula" placeholder="输入Excel公式..." rows="4">@IFS(D26="80型单孔调节底脚","M16单螺杆型底板",OR(D26="90型单孔调节底脚",D26="100型单孔调节底脚"),"M20单螺杆型底板",OR(D26="85100型双孔调节底脚",D26="85120型双孔调节底脚"),"M24双螺杆型底板1",D26="135120型双孔调节底脚","M24双螺杆型底板2")</textarea>
            </div>
            
            <div style="margin-bottom: 15px;">
                <label><strong>期望结果：</strong></label>
                <div style="background-color: #f8f9fa; padding: 10px; border-radius: 4px; font-family: monospace; margin-top: 5px;">
{IFS:调节底板@型号:80型单孔调节底脚=M16单螺杆型底板|90型单孔调节底脚,100型单孔调节底脚=M20单螺杆型底板|85100型双孔调节底脚,85120型双孔调节底脚=M24双螺杆型底板1|135120型双孔调节底脚=M24双螺杆型底板2}
                </div>
            </div>
            
            <button onclick="testSingleConvert()" id="testBtn">测试转换</button>
            <button onclick="getDefaultMapping()" id="mappingBtn">获取默认映射</button>
            <button onclick="clearResults()">清除结果</button>
            
            <div id="testResult" class="result info" style="display: none;"></div>
        </div>
        
        <div class="test-section">
            <h3>自定义测试</h3>
            
            <div style="margin-bottom: 15px;">
                <label for="customFormula"><strong>自定义公式：</strong></label>
                <textarea id="customFormula" placeholder="输入您要测试的Excel公式..."></textarea>
            </div>
            
            <button onclick="testCustomFormula()" id="customBtn">转换自定义公式</button>
            
            <div id="customResult" class="result info" style="display: none;"></div>
        </div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8080';
        
        async function testSingleConvert() {
            const testBtn = document.getElementById('testBtn');
            const resultDiv = document.getElementById('testResult');
            const formula = document.getElementById('testFormula').value;
            
            if (!formula.trim()) {
                showResult(resultDiv, '请输入测试公式', 'error');
                return;
            }
            
            testBtn.disabled = true;
            testBtn.textContent = '测试中...';
            showResult(resultDiv, '正在发送请求...', 'info');
            
            try {
                const response = await fetch(`${API_BASE}/api/formula-convert/single`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        excelFormula: formula,
                        cellVariableMap: {
                            "D26": "调节底板@型号"
                        }
                    })
                });
                
                const data = await response.json();
                
                if (response.ok && data.code === 200) {
                    const result = `✅ 转换成功！
                    
📋 请求信息：
URL: ${API_BASE}/api/formula-convert/single
Method: POST
Status: ${response.status}

📥 原始公式：
${data.data.originalFormula}

📤 转换结果：
${data.data.convertedFormula}

✅ 验证状态：${data.data.validation ? '通过' : '未通过'}

📝 响应消息：${data.message}

🔍 完整响应：
${JSON.stringify(data, null, 2)}`;
                    
                    showResult(resultDiv, result, 'success');
                    
                    // 检查是否符合期望
                    const expected = "{IFS:调节底板@型号:80型单孔调节底脚=M16单螺杆型底板|90型单孔调节底脚,100型单孔调节底脚=M20单螺杆型底板|85100型双孔调节底脚,85120型双孔调节底脚=M24双螺杆型底板1|135120型双孔调节底脚=M24双螺杆型底板2}";
                    
                    if (data.data.convertedFormula === expected) {
                        resultDiv.style.borderLeft = "5px solid #28a745";
                        resultDiv.innerHTML += "\n\n🎉 结果完全符合期望！";
                    } else {
                        resultDiv.style.borderLeft = "5px solid #ffc107";
                        resultDiv.innerHTML += `\n\n⚠️  结果与期望不符：\n期望: ${expected}\n实际: ${data.data.convertedFormula}`;
                    }
                } else {
                    showResult(resultDiv, `❌ 转换失败：\n${JSON.stringify(data, null, 2)}`, 'error');
                }
                
            } catch (error) {
                showResult(resultDiv, `❌ 网络错误：\n${error.message}\n\n请确保后端服务正在运行（http://localhost:8080）`, 'error');
            } finally {
                testBtn.disabled = false;
                testBtn.textContent = '测试转换';
            }
        }
        
        async function testCustomFormula() {
            const customBtn = document.getElementById('customBtn');
            const resultDiv = document.getElementById('customResult');
            const formula = document.getElementById('customFormula').value;
            
            if (!formula.trim()) {
                showResult(resultDiv, '请输入自定义公式', 'error');
                return;
            }
            
            customBtn.disabled = true;
            customBtn.textContent = '转换中...';
            showResult(resultDiv, '正在发送请求...', 'info');
            
            try {
                const response = await fetch(`${API_BASE}/api/formula-convert/single`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        excelFormula: formula,
                        cellVariableMap: {
                            "A1": "主框架@宽度",
                            "D26": "调节底板@型号",
                            "D8": "立柱片下@规格"
                        }
                    })
                });
                
                const data = await response.json();
                
                if (response.ok && data.code === 200) {
                    const result = `✅ 转换成功！
                    
📥 原始公式：${data.data.originalFormula}
📤 转换结果：${data.data.convertedFormula}
✅ 验证状态：${data.data.validation ? '通过' : '未通过'}
📝 响应消息：${data.message}`;
                    showResult(resultDiv, result, 'success');
                } else {
                    showResult(resultDiv, `❌ 转换失败：\n${JSON.stringify(data, null, 2)}`, 'error');
                }
                
            } catch (error) {
                showResult(resultDiv, `❌ 网络错误：${error.message}`, 'error');
            } finally {
                customBtn.disabled = false;
                customBtn.textContent = '转换自定义公式';
            }
        }
        
        async function getDefaultMapping() {
            const mappingBtn = document.getElementById('mappingBtn');
            const resultDiv = document.getElementById('testResult');
            
            mappingBtn.disabled = true;
            mappingBtn.textContent = '获取中...';
            
            try {
                const response = await fetch(`${API_BASE}/api/formula-convert/default-mapping`);
                const data = await response.json();
                
                if (response.ok && data.code === 200) {
                    const result = `📋 默认单元格映射：\n\n${JSON.stringify(data.mapping, null, 2)}`;
                    showResult(resultDiv, result, 'info');
                } else {
                    showResult(resultDiv, `❌ 获取映射失败：\n${JSON.stringify(data, null, 2)}`, 'error');
                }
                
            } catch (error) {
                showResult(resultDiv, `❌ 网络错误：${error.message}`, 'error');
            } finally {
                mappingBtn.disabled = false;
                mappingBtn.textContent = '获取默认映射';
            }
        }
        
        function showResult(resultDiv, message, type) {
            resultDiv.style.display = 'block';
            resultDiv.textContent = message;
            resultDiv.className = `result ${type}`;
        }
        
        function clearResults() {
            document.getElementById('testResult').style.display = 'none';
            document.getElementById('customResult').style.display = 'none';
        }
        
        // 页面加载时的说明
        window.onload = function() {
            showResult(document.getElementById('testResult'), 
                '📋 使用说明：\n1. 点击"测试转换"按钮测试预设的复杂IFS+OR公式\n2. 点击"获取默认映射"查看系统的默认单元格映射\n3. 在下方"自定义测试"区域测试您自己的公式\n\n⚠️ 请确保后端服务正在运行（http://localhost:8080）', 
                'info'
            );
        };
    </script>
</body>
</html> 